<template>
  <div class="tab">
    <router-link tag="div" class="tabItem" :to="{path:'/recommend'}"><span class="tabLink">推荐</span></router-link>
    <router-link tag="div" class="tabItem" to="/singer"><span class="tabLink">歌手</span></router-link>
    <router-link tag="div" class="tabItem" to="/rank"><span class="tabLink">排行</span></router-link>
    <router-link tag="div" class="tabItem" to="/search"><span class="tabLink">搜索</span></router-link>
  </div>
</template>

<style scoped lang='less'>
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .tab{
    font-size: 0;
    height:.88rem;
    background-color: #222;
    width:100%;
    display: flex;
    vertical-align: baseline;
    .tabItem{
      float: left;
      flex: 1;
      color: hsla(0,0%,100%,.5);
      text-align: center;
      padding-top:.2rem;
      font-size: .28rem;
      text-decoration: none;
      .tabLink{
        padding-bottom: .1rem;
      }
    }
    .router-link-active .tabLink{
      color: #ffcd32;
      border-bottom: .04rem solid #ffcd32;
    }
  }
</style>

<script>
  export default {
    data () {
      return {}
    }
    
  }
</script>
